<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用canvas 绘图</title>
    <style>
        div {
            display: inline-block;
        }

        canvas {
            background-color: #f1f1f1
        }
    </style>
</head>

<body>
    <p>绘制图像</p>
    <div>
        <img src="./../images/User.png" alt="" class="img">
        <img src="./../images/sort_desc.png" alt="" class="img">
        <canvas id="drawing" width="200" height="200">
            使用canvas绘图
        </canvas>
        <canvas id="drawing2" width="200" height="200">
            使用canvas绘图
        </canvas>
        <canvas id="drawing3" width="200" height="200">
            使用canvas绘图
        </canvas>
        <canvas id="drawing4" width="200" height="200">
            使用canvas绘图
        </canvas>
        <canvas id="drawing5" width="200" height="200">
            使用canvas绘图
        </canvas>
        <canvas id="drawing6" width="200" height="200">
            使用canvas绘图
        </canvas>
        <canvas id="drawing7" width="200" height="200">
            使用canvas绘图
        </canvas>
    </div>
</body>
<script>
    window.onload = function () {
        // 绘制图像
        (function () {
            var drawing = document.getElementById("drawing");
            if (drawing.getContext) {
                // 获得2d上下文
                var context = drawing.getContext("2d");
                // 取得一个html img 元素
                var image = document.getElementsByClassName("img")[0];

                // 传入image 设置x,y坐标
                context.drawImage(image, 10, 10);

                // 传入image 设置x,y坐标 目标宽高
                context.drawImage(image, 50, 10, 50, 50);

                // 传入image 源x,y坐标 要裁剪的宽高 目标x,y坐标 目标宽高
                context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);
            }
        })();

        // 阴影
        (function () {
            var drawing = document.getElementById("drawing2");
            if (drawing.getContext) {
                // 获得2d上下文
                var context = drawing.getContext("2d");

                // 设置阴影
                context.shadowOffsetX = 5, //x轴偏移量
                context.shadowOffsetY = 5; //y轴偏移量
                context.shadowBlur = 10; //模糊的像素
                context.shadowColor = "red"; //阴影的颜色

                // 绘制红色矩形
                context.fillStyle = "red";
                context.fillRect(10, 10, 50, 50);

                // 绘制蓝色矩形
                context.shadowColor = "#999"; //阴影的颜色
                context.fillStyle = "blue";
                context.fillRect(20, 20, 50, 50);
            }
        })();
        // 渐变
        (function () {
            var drawing = document.getElementById("drawing3");
            if (drawing.getContext) {
                // 获得2d上下文
                var context = drawing.getContext("2d");
                // 创建一个渐变对象 指定起点x,y坐标 和终点x,y坐标
                var gradient = context.createLinearGradient(30, 30, 80, 80);

                // 指定色标 指定色标位置（0到1之间的数字）和颜色
                gradient.addColorStop(0, 'white');
                gradient.addColorStop(0.5, 'black');
                gradient.addColorStop(1, 'blue');

                // 绘制红色矩形
                context.fillStyle = "red";
                context.fillRect(10, 10, 50, 50);

                // 绘制渐变矩形
                context.fillStyle = gradient;

                // 为了让渐变覆盖整个矩形，矩形和渐变对象的坐标必须匹配才行
                // 否则只会显示到部分渐变效果
                context.fillRect(30, 30, 50, 50);
            }
        })();
        // 径向渐变
        (function () {
            var drawing = document.getElementById("drawing4");
            if (drawing.getContext) {
                // 获得2d上下文
                var context = drawing.getContext("2d");
                // 创建一个径向渐变对象 指定两个圆为同心圆
                // 前三个参数为第一个圆的圆心和半径，后三个参数为另一个圆的圆心和半径
                // 这个圆心为55,55 是因为矩形的区域 从30起有50的宽度 因此就是30-80之间 因此相加除2为55
                var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);

                // 指定色标 指定色标位置（0到1之间的数字）和颜色
                gradient.addColorStop(0, 'white');
                gradient.addColorStop(0.5, 'black');
                gradient.addColorStop(1, 'blue');

                // 绘制红色矩形
                context.fillStyle = "red";
                context.fillRect(10, 10, 50, 50);

                // 绘制渐变矩形
                context.fillStyle = gradient;

                // 为了让渐变覆盖整个矩形，矩形和渐变对象的坐标必须匹配才行
                // 否则只会显示到部分渐变效果
                context.fillRect(30, 30, 50, 50);
            }
        })();
        // 模式 其实就是如何重复图像
        (function () {
            var drawing = document.getElementById("drawing5");
            if (drawing.getContext) {

                // 获得2d上下文
                var context = drawing.getContext("2d");

                // 取得html img元素
                var image=document.images[1];
                // 创建一个模式  传入img元素 和 要指定重复图像的字符串 与css background-repeat 属性值相同
                var pattern=context.createPattern(image,'repeat');
                
                //绘制矩形
                context.fillStyle=pattern;
                context.fillRect(10,10,150,150);
            }
        })();
        // 使用图像数据 创建一个灰阶过滤器
        (function () {
            var drawing = document.getElementById("drawing6");
            if (drawing.getContext) {

                // 获得2d上下文
                var context = drawing.getContext("2d");

                // 取得html img元素
                var image=document.images[0];
                
                // 将图像绘制到画布上
                context.drawImage(image,0,0);

                // 获得图像数据 在IE11 上能正常获取
                // 起始坐标  和要获取的图像的宽高 这里获取的是整个图片的像素
                let imageData=context.getImageData(0,0,image.width,image.height);

                // 获得该像素区域的图像数据
                let data=imageData.data;
                let red,green,blue,alpha,average;

                // 遍历数据 data属性是一个数组，保存着图像中每一个像素的数据，在data数组中
                // 每一个像素用4个元素来保存 分别表示红、绿、蓝、透明度值
                // 因此第一个像素的数据就保存在数组的第0到3个元素中
                for (let i = 0; i < data.length; i+=4) {
                    red=data[i];
                    green=data[i+1];
                    blue=data[i+2];
                    alpha=data[i+3];
                    
                    // 获得平均值
                    // 结果就是去掉了每个像素的颜色只保留了亮度接近的灰度值(彩色变黑白)
                    average=Math.floor((red+green+blue)/3);

                    data[i]=average;
                    data[i+1]=average;
                    data[i+2]=average;
                    
                    console.log(red);
                    console.log(green);
                    console.log(blue);
                    console.log(alpha);
                }
                
                imageData.data=data;

                // 把图像数据回写到画布上，最终得到了图像的黑白版
                context.putImageData(imageData,0,0)
            }
        })();
    }
</script>

</html>